<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字逐渐显现</title>
</head>
<body>
<h1 style="opacity: 0" id="message">西安欢迎您！</h1>

<script !src="">
    let element = document.getElementById("message");
    /*console.log(element);
    console.log(element.style);
    console.log(element.style.opacity);
    element.style.opacity = 1*/

    console.log(typeof element.style.opacity);
    console.log(typeof parseFloat(element.style.opacity));

    /*setInterval(
        function () {
            element.style.opacity = (parseFloat(element.style.opacity) + 0.02).toString()

            if (element.style.opacity > 1.0){
                element.style.opacity = '0'
            }
        },
        500
    )*/

    let opacity = 0

    setInterval(
        function () {
            element.style.opacity = opacity.toString()
            opacity += 0.02
            if (opacity > 1){
                opacity = 0
            }
        },
        500
    )
</script>
</body>
</html>